<template>
    <div class="crud-container">
        <el-card shadow="never">
            <el-input placeholder="请输入关键字" style="max-width: 280px" />
            <el-button type="primary" class="ml10">
                <el-icon>
                    <ele-Search />
                </el-icon>
                查询
            </el-button>
            <el-button type="default" class="ml10">
                <el-icon>
                    <ele-Refresh />
                </el-icon>
                重置
            </el-button>
        </el-card>
        <el-card shadow="never" class="content-box">
            <div class="toolbar">
                <el-button type="primary" @click="onOpenAdd">
                    <el-icon>
                        <ele-Plus />
                    </el-icon>
                    新增
                </el-button>
                <el-button type="danger" @click="">
                    <el-icon>
                        <ele-Delete />
                    </el-icon>
                    删除
                </el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" v-loading="loading" border @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="code" label="角色编码" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="状态" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == StatusEnum.ENABLE.value" type="success">{{ StatusEnum.ENABLE.label }}</el-tag>
                        <el-tag v-if="scope.row.status == StatusEnum.DISABLE.value" type="warning">{{ StatusEnum.DISABLE.label }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" show-overflow-tooltip width="240">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenAssign(scope.row)">
                            <el-icon>
                                <ele-Edit />
                            </el-icon>
                            分配权限
                        </el-button>
                        <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
                            <el-icon>
                                <ele-Edit />
                            </el-icon>
                            编辑
                        </el-button>
                        <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">
                            <el-icon>
                                <ele-Delete />
                            </el-icon>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="query.pageNum"
                background
                v-model:page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </el-card>
        <RoleForm ref="roleFormRef" @refresh="getTableData" />
        <AssignForm ref="assignFormRef" />
    </div>
</template>
<script setup lang="ts" name="system-role">
import { ref, reactive, onMounted, defineAsyncComponent } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Page } from '@/api/types.ts'
import { Role } from '@/api/system/role/types.ts'
import { getRoleList, getRoleDetail, deleteRole } from '@/api/system/role/index.ts'
import { StatusEnum } from '@/enums/StatusEnum.ts'

const RoleForm = defineAsyncComponent(() => import('./components/RoleForm.vue'))
const AssignForm = defineAsyncComponent(() => import('./components/AssignForm.vue'))
const loading = ref(false)
/** 获取角色列表 */
const query = reactive<Role.Query>({
    keywords: '',
    pageNum: 1,
    pageSize: 10,
})

const total = ref(0)
const tableData = ref<Array<Role.Row>>()
const getTableData = () => {
    getRoleList(query).then((resp: Page<Role.Row>) => {
        total.value = resp.total || 0
        tableData.value = resp.list || []
    })
}

const roleFormRef = ref()
/** 新增角色 */
const onOpenAdd = () => {
    roleFormRef.value.openDialog()
}
/** 分配权限 */
const assignFormRef = ref()
const onOpenAssign = (row: Role.Row) => {
    assignFormRef.value.openDialog()
}

/** 编辑角色 */
const onOpenEdit = async (row: Role.Row) => {
    const formData = await getRoleDetail(row.id)
    roleFormRef.value.openDialog(formData)
}
/** 删除角色信息 */
const onTabelRowDel = (row: Role.Row) => {
    ElMessageBox.confirm(`此操作将永久删除角色：${row.name}, 是否继续?`, '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            deleteRole(row.id + '')
                .then(() => {
                    ElMessage.success('删除成功')
                    getTableData()
                })
                .catch(() => {
                    ElMessage.error('删除失败')
                })
        })
        .catch(() => {})
}
/** 每页条数改变 */
const onHandleSizeChange = () => {}
/** 页码改变 */
const onHandleCurrentChange = () => {}

const handleSelectionChange = () => {}

onMounted(() => {
    getTableData()
})
</script>
